<template>
	<div class="template-room-outer-wrap">
		<alert-bind-phone  v-if="loginMust">
			<template #content>
				<div class="content">本房间设置了进入权限，请先登录！</div>
			</template>
			<template  #footbtn><div class="alert-bind-btn"><router-link to="/login" v-if="!user.logined" style="display: block;height: 100%;">登录</router-link></div></template>
		</alert-bind-phone>
		<bind-tips></bind-tips>
		<dynamic-template v-if="initLoading" :type="template_name" :room_id="this.listQuery.room_id" :eng_name="this.listQuery.eng_name" @load-complete="templateLoaded"></dynamic-template>
		<confirm-dialog v-if="payDialog">
			<template #header>
				<div class="confirm-dialog-header">提示<router-link :to="{name:'familyHall',params:{eng_name:listQuery.eng_name}}" class="close-icon"></router-link></div>
			</template>
			<template #content>
				<div class="content">{{payMessage}}</div>
			</template>
			<template  #footbtn><div class="foot-btn-wrap flex"><a href="javascript:;" class="foot-btn-a" v-if="hasPay" @click="roomPay">去支付</a><a href="javascript:;" class="foot-btn-a" @click="goRecharge" v-else>去充值</a><a href="javascript:;" class="foot-btn-a application-btn-a" @click="goApplication">去申请</a></div></template>
		</confirm-dialog>
		<alert-bind-phone v-if="payDialog" v-show="rechargeTips">
			<template #content>
				<div class="content">速去app充值！</div>
			</template>
			<template #footbtn><div class="alert-bind-btn">确定</div><div class="alert-bind-a-wrap" style="margin-top: 1.25rem;"><a class="alert-bind-a" href="javascript:;" style="text-decoration: underline;" @click="rechargeTips = false">关闭</a></div></template>
		</alert-bind-phone>
		<application v-if="payDialog" :class="{'active':applicationDialog}" @close="closeApplication" :room-id="listQuery.room_id" ref="applicationCom"></application>
		<alert-bind-phone v-if="isPasswordRoom">
			<template #tips>
				请输入房间密码!
			</template>
			<template #content>
				<div class="password-input-wrap border-4-1px" style="margin-top: 1.1rem;"><input type="password" name="room-password" class="password-input" v-model="listQuery.room_password"></div>
			</template>
			<template  #footbtn><div class="alert-bind-btn" @click="confirmPassword">确定</div><div class="alert-bind-a-wrap" style="margin-top: 1.25rem;"><router-link class="alert-bind-a" style="text-decoration: underline;" :to="'/' + listQuery.eng_name">返回大厅</router-link></div></template>
		</alert-bind-phone>
		<detail-skeleton-loading v-if="!skeletonLoading"></detail-skeleton-loading>
		<alert-bind-phone v-if="forceLogin">
			<template #tips>
				<div class="tips-wrap">提示</div>
			</template>
			<template #content>
				<div class="content">想观看直播,请先登录！</div>
			</template>
			<template  #footbtn><div class="alert-bind-btn"><router-link to="/login" style="display: block;height: 100%;">登录</router-link></div></template>
		</alert-bind-phone>
	</div>
</template>

<script>
	import {roomInitRoomConfig} from '@/api/room'
	import {payApplication} from '@/api/application'
	import dynamicTemplate from './dynamic_template'
	import bindTips from '@/views/bind_phone'
	import {mapGetters} from 'vuex'
	import alertBindPhone from '@/views/alert_bind_phone/index'
	import ConfirmDialog from '@/components/ConfirmDialog/index'
	import application from '@/components/application/index'
	import mixin from '@/mixins/removeLoading'
	import DetailSkeletonLoading from '@/components/SkeletonLoading/detailLoading'
	import {getRoomPassword,setRoomPassword} from '@/utils/auth'
	export default{
		name:'room',
		components:{
			bindTips,
			alertBindPhone,
			ConfirmDialog,
			application,
			dynamicTemplate,
			DetailSkeletonLoading
		},
		provide(){
			return{
				skeletonLoad:this.skeletonLoad
			}
		},
		inject:['reload'],
		mixins: [mixin],
		metaInfo(){
			return{
				title:this.roomName,
				meta: [{
				  name: 'keywords',
				  content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
				},{
					name: 'description',
					content: '在线分析大盘走势，分享最新资讯，交流投资技巧，老师讲得很精彩，你也来看看吧！'
				}],
			}
		},
		computed:{
			...mapGetters([
			  'user',
				'token'
			])
		},
		data(){
			return{
				template_name:undefined,
				listQuery:{
					room_id:this.$route.params.roomid,
					eng_name:this.$route.params.eng_name,
					room_password:undefined
				},
				roomName:'1234tv房间',
				loginMust:false,
				payMessage:'',
				hasPay:false,
				payDialog:false,
				rechargeTips:false,
				applicationDialog:false,
				price:undefined,
				isPasswordRoom:false,
				initLoading:false,
				skeletonLoading:false,
				forceLogin:false
			}
		},
		created(){
			if(getRoomPassword(`${this.$route.params.roomid}-${this.user.uid}`)){
				this.listQuery.room_password = getRoomPassword(`${this.$route.params.roomid}-${this.user.uid}`)
			}
			roomInitRoomConfig(this.listQuery).then(res=>{
				if(res.data.login_alert_time == 0 && !this.user.logined){
					this.forceLogin = true
				}else{
					this.initLoading = true
					this.listQuery.room_id = res.data.room_id + ''
					this.template_name = res.data.template_name
					this.roomName = res.data.room_name
					this.$store.dispatch('setRoomPara',res.data)
				}
			}).catch(err=>{
				this.skeletonLoading = true
				if('data' in err){
					if(err.data && 'room_id' in err.data){
						this.listQuery.room_id = err.data.room_id + ''
					}
				}
				if(err.code === 1000002){
					this.loginMust = true
				}else if(err.code === 1000011){
					this.payDialog = true
					this.payMessage = err.message
					this.hasPay = false
					this.price = err.data.price
				}else if(err.code === 1000010){
					this.payDialog = true
					this.payMessage = err.message
					this.hasPay = true
					this.price = err.data.price
				}else if(err.code === 1000013){
					this.isPasswordRoom = true
				}
			})
		},
		methods:{
			roomPay(){
				payApplication({room_id:this.listQuery.room_id,price:this.price}).then(res=>{
					this.$layer.open({
						content: res.message
						,skin: 'msg'
						,time: 1//2秒后自动关闭
						,end:()=>{
							this.reload()
						}
					});
				}).catch(err=>{
					if(err.code === 1000017){
						this.$layer.open({
							content: '您已经是会员了，无需支付费用！' 
							,skin: 'msg'
							,time: 1//2秒后自动关闭
							,end:()=>{
								this.reload()
							}
						});
					}
				})
			},
			goRecharge(){
				this.rechargeTips = true
			},
			goApplication(){
				this.applicationDialog = true
				this.$nextTick(()=>{
					this.$refs.applicationCom.init()
				})
			},
			closeApplication(){
				this.applicationDialog = false
			},
			confirmPassword(){
				roomInitRoomConfig(this.listQuery).then(res=>{
					setRoomPassword(this.listQuery.room_password,`${this.$route.params.roomid}-${this.user.uid}`)
					this.$router.push({name:'room',params:{room_id:this.$route.params.roomid,eng_name:this.$route.params.eng_name}})
					this.reload()
				}).catch(err=>{
				})
			},
			templateLoaded(){
				this.skeletonLoading = true
			},
			skeletonLoad(){
				this.skeletonLoading = !this.skeletonLoading
			}
		}
	}
</script>

<style lang="scss">
	.room-zan-icon{vertical-align: middle;}
</style>
